<!--
 * @description  : 出入库单详情
 * @descriptionDetail: 出入库单详情
 * @copyright    : 浙江烟草
 * @author       : dw
 * @create       : 2022-12-18 17:29:13
-->
<template>
	<view class="page">
		<!-- #ifdef H5-ONLY -->
		<theme-navbar :is-white="false" :title="navTitle" :custom-back="goBack" style="z-index: 99999">
		</theme-navbar>
		<!-- #endif -->
		<view :class="[detailInfo.status == C_STORE_BILL_STATUS.WAIT_CONFIRM ? 'content' : '']">
			<view>
				<view class="It-title">
					<view class="CT-title">
						{{ detailInfo.docName }}
					</view>
					<u-tag style="flex-shrink: 0;" :spStyle="getSpStyle(detailInfo)" mode="dark" shape="circle" :text="detailInfo.statusName"></u-tag>
				</view>
				<u-row class="pd-tp">
					<u-col span="6" class="pd-lf">
						<view class="CT-label">
							申请日期：
						</view>
						<view class="CT-value">
							{{ detailInfo.createTime || '/' }}
						</view>
					</u-col>
					<u-col span="6" class="pd-lf">
						<view class="CT-label">
							申请人：
						</view>
						<view class="CT-value">
							{{ detailInfo.creator || '/' }}
						</view>
					</u-col>
				</u-row>
				<u-row class="pd-tp">
					<u-col span="6" class="pd-lf">
						<view class="CT-label">
							单据类型：
						</view>
						<view class="CT-value">
							{{ detailInfo.billTypeName || '/' }}
						</view>
					</u-col>
					<u-col span="6" class="pd-lf">
						<view class="CT-label">
							总数量：
						</view>
						<view class="CT-value">
							{{ detailInfo.qty || '/' }}
						</view>
					</u-col>
				</u-row>
			</view>
			<view style="border-bottom: 20rpx solid #f2f3f5;margin: 26rpx -56rpx;"></view>
			<view class="form-style">
				<view class="form-style-title">
					<!-- 仓库改造 -->
					<view class="fs-content">
						<view class="left-info-tag"></view>
						<view class="fs-title">其他信息</view>
					</view>
					
					<view v-if="isOpenStoreBox && detailInfo.status == C_STORE_BILL_STATUS.WAIT_CONFIRM" class="fs-right-box" @click="goStoreSealBox">
						<view class="fs-right" v-if="detailInfo.billType == 'docGoodsReg' && detailInfo.inOut == '02'">封箱码制作</view>
						<view class="fs-right" v-else>封箱码查看</view>
						<u-icon name="arrow-right" color="#2979ff"></u-icon>
					</view>
					
				</view>
				<!-- 仓库改造 -->
				<u-form :model="baseInfo" label-width="140" label-position="top" :border-bottom="false" :label-style="labelStyle">
					<u-row>
						<u-col span="12" style="padding: 0px 0px">
							<u-form-item label="案件编号">
								{{ detailInfo.caseCode || '/' }}
							</u-form-item>
						</u-col>
					</u-row>
					<view v-if="!isShowOtherFlg">
					<u-row>
						<u-col span="12" style="padding: 0px 0px">
							<u-form-item label="案发时间">
								{{ detailInfo.caseDate || '/' }}
							</u-form-item>
						</u-col>
					</u-row>
					<u-row>
						<u-col span="12" style="padding: 0px 0px">
							<u-form-item label="当事人">
								{{ detailInfo.party || '/' }}
							</u-form-item>
						</u-col>
					</u-row>
					<u-row>
						<u-col span="12" style="padding: 0px 0px">
							<u-form-item label="出入库">
								{{ detailInfo.inOutName || '/' }}
							</u-form-item>
						</u-col>
					</u-row>
					<u-row>
						<u-col span="12" style="padding: 0px 0px">
							<u-form-item label="所属仓库">
								{{ detailInfo.storeName || '/' }}
							</u-form-item>
						</u-col>
					</u-row>
					<u-row>
						<u-col span="12" style="padding: 0px 0px">
							<u-form-item label="修改时间">
								{{ detailInfo.modifyTime || '/' }}
							</u-form-item>
						</u-col>
					</u-row>
					<u-row>
						<u-col span="12" style="padding: 0px 0px">
							<u-form-item label="作废原因">
								{{ detailInfo.memo || '/' }}
							</u-form-item>
						</u-col>
					</u-row>
					</view>
				</u-form>
				<view class="show-other-item" @click="isShowOther">
					<u-icon name="arrow-up" v-if="!isShowOtherFlg"></u-icon>
					<u-icon name="arrow-down" v-else></u-icon>
				</view>
			</view>
			
			
			<view style="border-bottom: 20rpx solid #f2f3f5;margin: 0rpx -56rpx;"></view>
			<view class="form-style" style="line-height: 62rpx;">
				<view class="form-style-title">
					<!-- 仓库改造 -->
					<view class="fs-content">
						<view class="left-info-tag" style="margin-top:14rpx"></view>
						<view class="fs-title">待确认数量</view>
					</view>
					<!-- 仓库改造 -->
				</view>
				<view v-for="(item,index) in goodsList" :key="index" style="border-bottom:1px solid #DADADD;font-size:26rpx">
					<view style="font-size:30rpx">
						{{ item.goodsName }}
					</view>
					<view>
						<text>
							案件编号：
						</text>
						<text>
							{{ item.caseCode }}
						</text>
					</view>
					<view class="prop-type-content">
						<view>
							<text>物品大类：</text>
							<text>{{ item.propTypeName }}</text>
						</view>
						<view>
						<text>物品小类：</text>
						<text>{{ item.propSubTypeName }}</text>
						</view>
					</view>
					<!-- 封箱码  开关控制 2024-5-8 fsx -->
					<view v-if="isOpenStoreBox" class="word-break">
						<text>封箱编码：</text>
						<text>{{item.qrCode || "/" }}</text>
					</view>
					<view v-if="isOpenStoreBox" class="word-break">
						<text>RFID编码：</text>
						<text>{{item.rfidCode || "/" }}</text>
					</view>
					<!-- 封箱码  开关控制 2024-5-8 fsx -->
					<u-row gutter="16">
						<u-col span="3">
							<view class="part-item-info">
								<view class="sub-title">
									条数
								</view>
								<view class="main-info">
									{{ item.qty }}
								</view>
							</view>
						</u-col>
						<u-col span="3">
							<view class="part-item-info">
								<view class="sub-title">
									拆分
								</view>
								<view :class="[item.isBreakName == '否' ? 'main-info' : 'main-info-color']" @click="deleteData(item,index)">
									{{ item.isBreakName }}
								</view>
							</view>
						</u-col>
						<u-col span="6">
							<view class="part-item-info">
								<view class="sub-title">
									库位
								</view>
								<view class="main-info">
									{{ item.psCode || '/' }}

									<view v-if="detailInfo.status == C_STORE_BILL_STATUS.WAIT_CONFIRM && (detailInfo.inOut == '01' || detailInfo.inOut == '02') && item.isBreak == 1">
										<text @click="selectLibrary(item,index)" style="padding-left:20rpx;color:#0070d2">
											库位
										</text>
									</view>
									<view v-else-if="detailInfo.status == C_STORE_BILL_STATUS.WAIT_CONFIRM && (detailInfo.inOut == '01' || detailInfo.inOut == '02') && item.isBreak == 0">
										<text @click="selectLibrary(item,index)" style="padding-left:20rpx;color:#0070d2">
											库位
										</text>
									</view>
									<!-- <view v-else>
										<text @click="selectLibrary(item,index)" style="padding-left:20rpx;color:#0070d2">
											库位
										</text>
									</view> -->

									<text v-if="detailInfo.status == C_STORE_BILL_STATUS.WAIT_CONFIRM && !item.qrCode" style="padding-left:20rpx;color:#0070d2" @click="splitData(item,index)">
										拆分
									</text>
									
									<!-- 硬件未采购 注释掉 -->
									<!-- <text v-if="detailInfo.status == C_STORE_BILL_STATUS.WAIT_CONFIRM" style="padding-left:30rpx;color:#0070d2">识别标签</text> -->
									
								</view>
								
								

								<!-- 状态待确认且为入库且出库库位为空 -->
								<!-- <text -->
								<!-- v-if="detailInfo.status == C_STORE_BILL_STATUS.WAIT_CONFIRM && (detailInfo.inOut == '02' || (detailInfo.inOut == '01' && item.isBreak == 1))" -->
								<!-- @click="selectLibrary(item,index)" -->
								<!-- style="padding-left:20rpx;color:#0070d2" -->
								<!-- > -->
								<!-- 库位 -->
								<!-- </text> -->
								<!-- <text v-if="detailInfo.status == C_STORE_BILL_STATUS.WAIT_CONFIRM" style="padding-left:20rpx;color:#0070d2" @click="splitData(item,index)"> -->
								<!-- 拆分 -->
								<!-- </text> -->

							</view>
						</u-col>
					</u-row>
				</view>
				<view class="total-sty">
					<text class="fs-30">合计数量(条)：</text>
					<text class="fs-30" style="color:#ee8c4f">{{ detailInfo.qty }}</text>
				</view>
			</view>
			<view style="border-bottom: 20rpx solid #f2f3f5;margin: 26rpx -56rpx;"></view>
			<view class="form-style">
				<view class="form-style-title">
					<!-- 仓库改造 -->
					<view class="fs-content">
						<view class="left-info-tag"></view>
						<view class="fs-title">附件信息</view>
					</view>
					<!-- 仓库改造 -->
				</view>
				<m-upload maxCount="99" :file-list="imgList" :disabled="true" :deletable="false" upApiUrl="fileUpload">
				</m-upload>
				<u-image width="100%" v-if="!imgList.length" height="330rpx" style="padding:0 0 34rpx 14rpx" mode="scaleToFill" :src="'/static/certificate/noImg.png'">
				</u-image>
			</view>
		</view>
		<view class="submit-btns btn-other-cls" v-if="detailInfo.status == C_STORE_BILL_STATUS.WAIT_CONFIRM" style="margin-left:-32rpx">
			<u-button plain class="u-btn"  type="primary" @click="saveBill(0)">
				保存
			</u-button>
			<u-button class="u-btn" size="medium" type="error" @click="selectOrg()">
				作废单据
			</u-button>
			<u-button class="u-btn" size="medium" type="primary" @click="saveBill(1)">
				确认单据
			</u-button>
		</view>
		<u-popup :mask-close-able="false" v-model="AcceptanceShow" border-radius="20" mode="center" width="80%" height="306rpx">
			<view class="good-popup-lay">
				<view style="margin: 32rpx 0;">
					<u-form-item label-width="150" label="拆分数量:" label-position="left">
						<u-input v-model="breakQty" placeholder="请输入" type="number" :needValid="true"></u-input>
					</u-form-item>
				</view>
				<view class="good-popup-lay__btns">
					<u-button plain type="primary" size="medium" @click="() => { AcceptanceShow = false; breakQty = '';}">
						取&nbsp;&nbsp;&nbsp;&nbsp;消
					</u-button>
					<u-button type="primary" size="medium" @click="saveBreakQty">
						保&nbsp;&nbsp;&nbsp;&nbsp;存
					</u-button>
				</view>
			</view>
		</u-popup>
		<!-- 作废单据 -->
		<u-popup mode="bottom" height="60%" v-model="cancelVisible">
			<cancel-doc :billId="detailInfo.id" @confirm="cancelHandle"></cancel-doc>
		</u-popup>
	</view>
</template>

<script>
	import MUpload from "@/components/m-upload.vue";
	import storeService from '@/service/store/store.service.js';
	import cancelDoc from './cancelDoc';
	import fabButton from '@/components/uni-fab.vue';
	import commonService from '@/service/common/common.service.js';
		
	import {
		C_STORE_BILL_STATUS,
	} from "@/service/store/mapping/enum.js"
	const sysCodeColors = {
		"02": {
			color: "#01A79A",
			borderColor: "#01A79A",
			backgroundColor: "#C0ECE2",
		},
		"01": {
			color: "#AC0000",
			borderColor: "#AC0000",
			backgroundColor: "#F2CCCC",
		},
		"03": {
			color: "#717579",
			borderColor: "#717579",
			backgroundColor: "#EDEEEF",
		},
	};
	export default {
		components: {
			MUpload,
			cancelDoc,
			fabButton
		},
		data() {
			return {
				customStyle: {
					padding: "20rpx 32rpx",
				},
				labelStyle: {
					'color': "#666666",
					'font-size': '13px',
				},
				remarks: '',
				fileUploadParam: {
					bizId: "",
				},
				baseInfo: {}, // 基本信息
				checkInfo: {}, // 审核信息
				fileList: [],
				detailInfo: {},
				user: this.$store.state.userInfo,
				goodsList: [],
				C_STORE_BILL_STATUS: C_STORE_BILL_STATUS,
				imgList: [],
				AcceptanceShow: false,
				breakQty: '', // 拆分数量
				splitObj: '', // 需要拆分对象
				splitIndex: 0,
				goodsIndex: 0,
				cancelVisible: false,
				// 其他信息展开收起 2024-5-8 fsx开始
				isShowOtherFlg:true,
				isOpenStoreBox:false,// 是否开启涉案物品封箱
				// 其他信息展开收起 2024-5-8 fsx 结束
			}
		},
		watch: {
			goodsList: {
				immediate: true,
				handler: function(val) {
					val.filter(item => {
						this.$set(item, 'isBreakName', '');
						if (this.detailInfo.inOut == '02') {
							if (item.isBreak == 1) {
								item.isBreakName = '删除'
							} else {
								item.isBreakName = '否'
							}
						} else {
							if (this.$u.test.isEmpty(item.psCode)) {
								item.isBreakName = '删除'
							} else {
								item.isBreakName = '否'
							}
						}
					})
				},
			},
		},
		onLoad() {
			this.detailInfo = this.getRouteParam();
			console.log("danju",	this.detailInfo)
			this.fileUploadParam.bizId = this.detailInfo.bizUuid;
		},
		created() {
			this.init();
			this.getStoreBoxConfig();
		},
		mounted() {
			this.initAuditImage();
		},
		methods: {
			getSpStyle(it) {
				if (it.status == C_STORE_BILL_STATUS.WAIT_CONFIRM) {
					return sysCodeColors[it.status] || {};
				} else if (it.status == C_STORE_BILL_STATUS.COMPLETE) {
					return sysCodeColors[it.status] || {};
				} else if (it.status == C_STORE_BILL_STATUS.TO_VOLID) {
					return sysCodeColors[it.status] || {};
				}
			},
			selectOrg() {
				this.cancelVisible = true;
			},
			cancelHandle(e) {
				if (e) {
					this.cancelVisible = false;
					this.backPrev({
						paramKey: 'refresh',
						param: true,
					})
				}
			},
			initAuditImage() {
				storeService.getFiles(this.detailInfo.id).then(res => {
					if (res.success) this.imgList = res.data;
				}).catch(e => {
					console.log(e);
				})
			},
			init() {
				this.$modal.showLoading('加载中...');
				storeService.billGoodsDtl(this.detailInfo.id).then(res => {
					if (res.success) {
						this.$modal.hideLoading();
						this.goodsList = res.data
					} else {
						this.$modal.hideLoading();
						console.log(res)
					}
				}).catch(err => {
					this.$modal.hideLoading();
					console.log(err)
				})
			},
			splitData(e, i) { // 拆分确定事件
				this.splitObj = e; // 需要拆分的对象
				this.splitIndex = i; // 查分对应索引
				this.breakQty = '';
				if(this.isOpenStoreBox && !!this.splitObj.qrCode) {
					this.$modal.confirm("物品封箱码已存在，是否继续拆分物品！",()=>{
						this.AcceptanceShow = true;
					},()=>{
						
					})
				} else {
					this.AcceptanceShow = true;
				}
			},
			
			// 选择库位
			selectLibrary(e, i) {
				this.goodsIndex = i;
				this.setRouteParam({
					...e,
					storeName: this.detailInfo.storeName,
					goodsIndex: i,
				});
				this.$u.route("/pages/store/billManage/selectWarehouseLocation");
			},
			saveBreakQty() {
				if (this.$u.test.isEmpty(this.breakQty)) return this.$u.toast('请输入拆分数量');
				if (Number(this.breakQty) > Number(this.splitObj.qty)) return this.$u.toast('拆分数量必须小于原始数量')
				let newSplitIndex = Number(this.splitIndex) + 1
				this.goodsList.splice(newSplitIndex, 0, {
					goodsName: this.splitObj.goodsName,
					goodsUuid: this.splitObj.goodsUuid,
					caseCode: this.splitObj.caseCode,
					caseUuid: this.splitObj.caseUuid,
					propTypeName: this.splitObj.propTypeName, // 大类
					propType: this.splitObj.propType,
					propSubType: this.splitObj.propSubType, // 小类
					propSubTypeName: this.splitObj.propSubTypeName,
					qty: this.breakQty,
					isBreak: 1,
					billId: this.splitObj.billId,
					storeId: this.splitObj.storeId,
					psCode: '',
					psId: '',
					rfidCode: this.splitObj.rfidCode,
					qrCode: this.splitObj.qrCode,
				})
				this.goodsList[this.splitIndex].qty = (Number(this.splitObj.qty) - Number(this.breakQty)).toFixed(2);
				this.AcceptanceShow = false;
			},
			deleteData(e, i) {
				if (e.isBreak == 0 || this.detailInfo.status != C_STORE_BILL_STATUS.WAIT_CONFIRM) return;
				this.goodsList.splice(i, 1);
				this.goodsList[0].qty = (Number(this.goodsList[0].qty) + Number(e.qty)).toFixed(2);
			},
			updateBackState(param) {
				console.log(param)
				if (param.refresh) { // 确认
					let i = param.refresh[0].goodsIndex;
					this.goodsList[i].psCode = param.refresh[0].psCode
					this.goodsList[i].psId = param.refresh[0].psId
				} else if(param.allRefresh) { // 批量确认
					this.goodsList.forEach(item => {
						item.psCode = param.allRefresh[0].psCode
						item.psId = param.allRefresh[0].psId
					})
				} else{ 
					// 涉案物品改造新增 fsx 开始
					this.init()
					// 涉案物品改造新增 fsx 开始
				}
			},
			saveBill(type) {
				let param = this.detailInfo;
				param.goodsDtlList = this.goodsList;
				let list = param.goodsDtlList.filter(item => {
					if (this.$u.test.isEmpty(item.psCode)) {
						return item
					}
				})
				if (type == 1 && list.length > 0) {
					return this.$u.toast('有库位未选择，请选择库位！');
				}
				this.$modal.showLoading('正在保存...');
				storeService.storeBillConfirm(param).then(res => {
					if (res.success) {
						this.$modal.hideLoading();
						if (type == 0) {
							this.backPrev({
								paramKey: 'refresh',
								param: true,
							})
						} else {
							this.confirmBill();
						}
					} else {
						this.$u.toast(res.msg);
					}
				}).catch(err => {
					this.$modal.hideLoading();
					console.log(err)
				});
			},
			confirmBill() {
				let param = {
					billId: this.goodsList[0].billId,
				}
				this.$modal.showLoading('正在保存...');
				storeService.confirmBill(param).then(res => {
					if (res.success) {
						this.$modal.hideLoading();
						this.backPrev({
							paramKey: 'refresh',
							param: true,
						})
					} else {
						this.$u.toast(res.msg);
					}
				}).catch(err => {
					this.$modal.hideLoading();
					console.log(err)
				});
			},
			// 其他信息展开收起 2024-5-8 fsx开始
			isShowOther(){
				this.isShowOtherFlg = !this.isShowOtherFlg
			},
			// 其他信息展开收起 2024-5-8 fsx 结束
			goStoreSealBox(){
				// 
				let isAddGoods = false;
				if(this.detailInfo.billType == "docGoodsReg" && this.detailInfo.inOut == '02') {
					isAddGoods = true;
				}

				this.setRouteParam({
					fullDocName:this.detailInfo.docName,
					caseCode:this.detailInfo.caseCode,
					storeId:this.detailInfo.storeId,
					isAddGoods: isAddGoods,
					storeBill:this.detailInfo.billCode,
					billId:this.detailInfo.id,
					storeName:this.detailInfo.storeName,
					formTo:"bill"
				});
				this.$u.route("/pages/store/box/storeBoxList");
				console.log("跳转封箱码",this.detailInfo)
			},
			getStoreBoxConfig(){
				commonService.getSysConfig("customize","store-box-qr").then((res)=>{
					if(res.code == 0 && res.success && res.msg) {
						let code = res.msg;
						if (!! code && (code.indexOf(this.user.orgCode) > -1 ||
						code.indexOf(this.user.cityOrgCode) > -1 ||
						code.indexOf(this.user.provOrgCode) > -1) ) {
							this.isOpenStoreBox = true;
						} 
					} 
				}).catch((err)=>{
					console.log(err)
				})
			}
		},
	}
</script>

<style scoped lang="scss">
	.page {
		padding: 28rpx 30rpx;
	}

	.upload-sty {
		margin-left: -12rpx;
	}

	.pd-lf {
		padding-left: 0;
	}

	.pd-tp {
		padding-top: 13px;
	}

	.content {
		// padding: 24rpx 36rpx 180rpx 36rpx;
		padding-bottom: 180rpx;
	}

	.content-btn {
		padding: 24rpx 36rpx 20rpx 36rpx;
	}

	.fs-30 {
		font-size: 30rpx
	}

	.It-title {
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #DADADD;
		padding-bottom: 11px;
		align-items: center;
	}

	.CT-title {
		font-size: 18px;
		font-weight: bold;
	}

	.CT-label {
		font-size: 13px;
		color: #989EA1;
		padding-bottom: 6px;
	}

	.CT-value {
		font-size: 14px;
		color: #393B3D;
	}

	.form-style-title {
		display: flex;
		justify-content: flex-start;
		flex-direction: row;
		width: 100%;
		align-items: flex-start;
	}

	.left-info-tag {
		padding: 8px 2px;
		background-color: #ee8c4f;
		border-radius: 22px;
		margin: 3px 6px 13px 0px;
	}

	.left-info-check-tag {
		padding: 8px 2px;
		background-color: #ee8c4f;
		border-radius: 22px;
		margin: 3px 6px 13px 0px;
	}

	.fs-title {
		font-weight: bold;
		font-size: 32rpx;
	}

	.loc-box {
		line-height: 38px;
		padding: 11px 0;
		font-size: 13px;
		color: #303133;
	}

	.inline-box {
		display: flex;
		align-items: center;
	}

	.loc-inline {
		font-size: 13px;
		color: #666666;
	}

	.part-item-info {
		text-align: left;

		.sub-title {
			color: $u-tips-color;
			padding-bottom: 10rpx;
			font-size: 26rpx;
		}

		.main-info {
			color: $u-content-color;
			font-weight: 600;
			margin-bottom: 5px;
			display: flex;
		}

		.main-info-color {
			color: $u-content-color;
			font-weight: 600;
			margin-bottom: 5px;
			color: red;
		}
	}

	.total-sty {
		padding-top: 20rpx;
	}

	.good-popup-lay {
		padding: $cm-content-paddng-row;
		width: 100%;
		height: 100%;

		&__title {
			font-size: 36rpx;
			font-weight: 600;
			color: $u-main-color;
			margin: 10rpx 0;
			text-align: center;
			width: 100%;
		}

		&__btns {
			width: 100%;
			margin-top: 24rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			uni-button {
				flex: 0.28;
			}
		}
	}
	// 改造单据详情 开始
	.show-other-item {
		height: 40px;
		display: flex;
		justify-content: center;
		line-height: 40px;
	}
	.fs-content {
		display: flex;
		justify-content: space-around;
		flex-direction: row;
		align-content: center;
		align-items: stretch;
		text-align: center;
		flex-wrap: nowrap;
	}
	.form-style-title {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		width: 100%;
		align-items: flex-start;
		color: $u-main-color
	}
	.fs-right-box {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-around;
		align-items: baseline;
	}
	.fs-right {
		color: $u_type_primary;
	}
	.prop-type-content {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: space-around;
		align-items: stretch;
	}
	.word-break {
		word-break: break-all;
	}
	// 改造单据详情 结束
</style>
